<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8" />
	<title>非单文件组件</title>
	<script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
	<!-- 
		组件使用的基本流程：
			1.定义组件：Vue.extend(options)
			2.注册组件：
				全局注册：Vue.component('组件名',组件)
				局部注册：配置components属性，components:{组件名:组件}
			3.写组件标签
	-->
	<!-- 准备好一个容器-->
	<div id="root"></div>

	<script type="text/javascript">
		Vue.config.productionTip = false //关闭生产提示

		//向Vue的原型对象上追加一个xyz属性，值为1
		Vue.prototype.xyz = 1

		/* 
			定义一个School组件：
				1.如何定义一个组件？-- 使用Vue.extend(options)去创建
				2.School的本质是一个构造函数，我们以后去写<School/>,Vue帮我们去new School
				3.Vue.extend(options)中的options是配置对象，这个配置对象几乎和new Vue时的那个options一样，区别如下：
					(1).不能写el去指定容器
						原因：所有组件实例最终要被一个vm所管理，vm中会指定好el,即：组件让如哪个容器。
					(2).data必须写成函数
						原因：为了确保多个组件中的数据互不干扰
					(3).组件的模板结构，要配置在template属性中:
						(3.1)值为html字符串，而且要用模板字符串。
						(3.2)模板结构，必须只有一个跟标签。
				4.所有的组件定义后，必须注册才能使用，注册分为：全局注册、局部注册
				5.特别注意：
					(1).School确实是构造函数，但不是我们亲手写的School，是Vue.extend生成的。
					(2).Vue.extend调用的返回值是VueComponent构造函数，所以new School其实就是在new VueComponent。
					(3).所谓组件实例，就是VueComponent创建的实例，简称vc。
						所有Vue实例，就是Vue创建的实例，简称vm
					(4).组件的data函数、以及methods中配置的函数中this都是vc
				6.一个最最最重要的关系：
					VueComponent继承了Vue，所以Vue.prototype上的属性和方法，vc都能看得见
		*/
		const School = Vue.extend({
			//data中存放组件所需数据
			data() {
				console.log('@', this)
				return {
					name: '尚硅谷',
					address: '北七家镇-宏福科技园'
				}
			},
			methods: {
				showAddress() {
					console.log(this.address)
				}
			},
			//template中配置组件的模板结构
			template: `
					<div>
						<h2 class="title">学校名：{{name}}</h2>
						<h2 @click="showAddress">学校地址：{{address}}</h2>	
					</div>
				`
		})

		//定义个Hello组件
		const Hello = Vue.extend({
			template: `<h2>Hello</h2>`
		})

		const App = Vue.extend({
			components: {
				School,
				Hello
			},
			template: `
					<div>
						<Hello/>
						<School/>
					</div>
				`
		})

		//注册School组件----全局注册
		// Vue.component('School',School)

		//定义一个vm，去管理所有的组件
		const vm = new Vue({
			el: '#root',
			//注册School组件----局部注册----以后工作用的多
			components: {
				App
			},
			template: '<App/>'
		})
	</script>
</body>

</html>